<template>
  <div class="full">
    <div class="topc">
      <div class="one">
        <div class="left" style="background-image: url('/images/ic1.png');">&nbsp;</div>
        <div class="right">
          <div class="row1">{{ state.statSum }}</div>
          <div class="row2">设备总数</div>
        </div>
      </div>
      <div class="one">
        <div class="left" style="background-image: url('/images/ic2.png');">&nbsp;</div>
        <div class="right">
          <div class="row1">{{ state.statOnline }}</div>
          <div class="row2">设备在线</div>
        </div>
      </div>
      <div class="one">
        <div class="left" style="background-image: url('/images/ic3.png');">&nbsp;</div>
        <div class="right">
          <div class="row1">{{ state.statOffline }}</div>
          <div class="row2">设备离线</div>
        </div>
      </div>
    </div>
    <div class="head">
      <span style="margin-left:0px;">设备名称</span>
      <el-input v-model="state.pm.cameraName" clearable placeholder="请输入" style="width:200px;"></el-input>
      <span>设备类型</span>
      <el-select v-model="state.pm.cameraType" placeholder="请选择" clearable>
        <el-option label="抓拍视频" value="1001" />
        <el-option label="普通视频" value="1002" />
      </el-select>
      <span>设备状态</span>
      <el-select v-model="state.pm.cameraState" placeholder="请选择" clearable>
        <el-option label="在线" :value="1" />
        <el-option label="离线" :value="0" />
      </el-select>
      <el-button class="cusb2" style="width:80px;margin-left:20px;" @click="getData">查询</el-button>
      <el-button class="cusb2" style="width:120px;margin-left:auto;" @click="tonew">新增设备</el-button>
    </div>
    <div class="tab">
      <el-table :data="state.data" height="440" stripe style="width: 100%">
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="cameraName" label="设备名称" min-width="260" />
        <el-table-column prop="maintainOrg" label="运维部门" width="150" />
        <el-table-column prop="cameraState" label="设备状态" width="100" align="center" >
          <template #default="scope">
            <span>{{scope.row.cameraState==0?'离线':'在线'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="所属区域" width="150" />
        <el-table-column prop="cameraIpv4" label="IP地址" width="150" />
        <el-table-column prop="cover_pic" label="图片" width="150">
          <template #default="scope">
            <span v-if="scope.row.cover_pic==null||scope.row.cover_pic==''">--</span>
            <img v-else class="img" :src="scope.row.cover_pic" />
          </template>
        </el-table-column>
        <el-table-column prop="relationCount" label="关联数量" width="80" align="center" />
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button link @click="toedit(scope.row)">编辑</el-button>
            <el-button link @click="todel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination background v-model:page-size="state.pm.pagesize" v-model:current-page="state.pm.page" @size-change="getData"
        @current-change="getData" layout="total,sizes, prev, pager, next, jumper" :total="state.total" />
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const state = reactive({
  pm: { cameraName: '', cameraType: '', cameraState: '', page: 1, pagesize: 10 },
  data: [],
  total: 15,
  statOffline: 0,
  statOnline: 0,
  statSum: 0
})
const emit = defineEmits(["new"]);
const getData = () => {
  useApi.post("/arhome/system/camera/list", state.pm).then((res) => {
    state.data = res.data.cameraList
    state.total = res.data.total
    state.statOffline = res.data.statOffline
    state.statOnline = res.data.statOnline
    state.statSum = res.data.statSum
  });
}
const tonew = () => {
  let store = useMyStore()
  store.params.e1 = ''
  emit('new')
}
const toedit = (item) => {
  let store = useMyStore()
  store.params.e1 = item.cameraId
  emit('new')
}
const todel = (item) => {
  let pm = {
    optType: 'D',
    cameraId: item.cameraId
  }
  ElMessageBox.confirm(
    '确认删除当前记录？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useApi.post("/arhome/system/camera/handle", pm).then((res) => {
        getData()
      })
    })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.topc {
  display: flex;
  height: 96px;
  border-bottom: 1px solid #0F7BC4;
  border-image: linear-gradient(90deg, rgba(207, 245, 255, 0), rgba(233, 245, 255, 1), rgba(235, 251, 255, .8), rgba(163, 237, 255, 0)) 2 2;

  .one {
    display: flex;
    width: 200px;
    height: 80px;


    .left {
      width: 60px;
      height: 60px;
      margin-right: 30px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .right {
      width: 100px;
      display: flex;
      flex-direction: column;

      .row1 {
        font-weight: 600;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .row2 {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 22px;
      }
    }
  }
}

.head {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  span {
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 8px 0 30px;
  }
}
.img{
  width: 56px;
  height: 36px;
  object-fit: contain;
}
.tab {
  width: 100%;
  height: 440px;
}

.pages {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:deep(.el-select) {
  width: 200px;
  --el-input-text-color: #ffffffc0;

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-table) {
  --el-table-header-bg-color: #003D6399;
  --el-table-header-text-color: #ffffffc0;
  --el-table-bg-color: #00000012;
  --el-table-border-color: #00000010;
  --el-table-text-color: #ffffffc0;
  --el-table-tr-bg-color: #20628fcc;
  --el-table-row-hover-bg-color: #00000033;
}

:deep(.el-table__row--striped td) {
  background-color: #134f7dcc !important;
}

:deep(.el-pagination) {
  --el-pagination-button-bg-color: #003D6399;
  --el-pagination-button-color: #ffffffc0;
  --el-text-color-regular: #ffffffc0;
  --el-disabled-bg-color: #003D636E;
}

:deep(.el-button) {
  color: #ffffff;
}
</style>